<template>
  <header class="header">
    <h1>todos</h1>
    <!-- 9. 目标: 全选状态
9.0 v-model关联全选状态
页面变化(勾选true, 未勾选false) -> v-model -> isAll变量
-->
    <input id="toggle-all" class="toggle-all" type="checkbox" v-model="isAll" />
    <label for="toggle-all"></label>
    <input
      class="new-todo"
      placeholder="输入任务名称-回车确认"
      autofocus
      @keydown.enter="enterFn"
      v-model="task"
    />
    <!-- 绑定键盘事件 enter  v-m 双向绑定控制输入的任务名 -->
  </header>
</template>

<script>
export default {
   props: ['list'],
  data() {
    return {
      // 定义任务名task为变量
      task: "",
    };
  },
  methods: {
    enterFn() {
      // 判断 如果任务名输入为空 提示不能输入
      if (this.task.trim().length === 0) {
        alert("任务名不能为空");
        return;
      }
      // 子传父 $emit方法 把任务名 this.task传过去
      this.$emit("add", this.task);
      // 输入添加完 从新为空
      this.task = "";
    },
  },
   // 9.1 定义计算属性
  computed:{
isAll:{
  set(checked){
    //9.3 影响数组里每个小选框绑定的isDone属性
    this.list.forEach(item=>item.isDone=checked)

  },
  get(){
     // 9.4 小选框统计状态 -> 全选框
 // 9.5 如果没有数据, 直接返回false-不要让全选勾选状态
 return this.list.every(item => item.isDone === true)
  }

}
  }
};
</script>